<template>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>主数据</el-breadcrumb-item>
        <el-breadcrumb-item>计量单位</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->

    <!--  搜索栏开始 -->
    <!-- //绑定queryUnitmeasure[]数组 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryUnitmeasure" class="demo-form-inline">
        <el-form-item label="单位编码">

            <el-input v-model="queryUnitmeasure.measureCode" placeholder="请输入单位编码" clearable />
        </el-form-item>
        <el-form-item label="单位名">

            <el-input v-model="queryUnitmeasure.measureName" placeholder="请输入单位名称" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="loadUnitmeasures"><el-icon>
                    <Search />
                </el-icon>搜索</el-button>
            <el-button @click="cleanUnitmeasures"><el-icon>
                    <Refresh />
                </el-icon>重置</el-button>
        </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->

    <!-- 工具栏开始 -->
    <div class="flex" style="margin-top: 10px;">
        <el-button title="新增单位" @click="this.addUnitmeasureDialogVisible = true" type="primary">
            <el-icon>
                <Plus />
            </el-icon>
            新增
        </el-button>
        <el-button title="修改选中工作站" @click="handlerEdits" type="success">
            <el-icon>
                <EditPen />
            </el-icon>
            修改
        </el-button>
        <el-button title="删除选中工作站" @click="deleteWorkstations" type="danger"><el-icon>
                <Delete />
            </el-icon>
            删除
        </el-button>
        <el-button title="导出选中工作站" @click="printWorkstations" type=""><el-icon>
                <Download />
            </el-icon>
            导出
        </el-button>
       
    </div>
    <!-- 工具栏结束 -->

    <!-- 表格 开始 -->
    <el-table ref="unitmeasuresTable" :data="unitmeasures" max-height="800px" stripe="true" border="true"
        style="width: 100%;margin-top: 10px;">
        <el-table-column type="selection" width="55" />
        <el-table-column label="单位编码" property="measureCode" />
        <el-table-column label="单位名称" property="measureName" />
        <el-table-column label="是否是主单位" property="primaryFlag">
            <template #default="scope">
                <!-- scope.row 就是整行数据-->
                <el-tag v-if="scope.row.primaryFlag == 'Y'" class="ml-1" type="success">是</el-tag>
                <el-tag v-else class="ml-1" type="danger">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="与主单位换算比例" property="changeRate" />
        <el-table-column label="是否启用" property="enableFlag">
            <template #default="scope">
                <!-- scope.row 就是整行数据-->
                <el-tag v-if="scope.row.enableFlag == 'Y'" class="ml-2" type="success">是</el-tag>
                <el-tag v-else class="ml-2" type="danger">否</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="备注" property="remark" />

        <el-table-column width="200px" align="center" label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)"><el-icon>
                        <EditPen />
                    </el-icon>编辑</el-button>
                <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                    title="您是否要删除这行数据">
                    <template #reference>
                        <el-button size="small" type="danger"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination style="margin-top: 15px;" :page-size="limit" :pager-count="10" @current-change="changePage" background
        layout="prev, pager, next" :total="total" />
    <!-- 分页栏结束 -->

    <!-- 添加单位的弹窗窗体开始-->
    <el-dialog v-model="addUnitmeasureDialogVisible" title="添加单位" width="1000" align-center>
        <!-- 添加单位的表单 -->
        <el-form label-width="100px" :model="newUnitmeasure" style="max-width: 900px">

            <el-form-item label="单位编码">
                <el-input v-model="newUnitmeasure.measureCode" />
            </el-form-item>
            <el-form-item label="单位名称">
                <el-input v-model="newUnitmeasure.measureName" />
            </el-form-item>
            <el-form-item label="是否是主单位">
                <el-radio-group v-model="newUnitmeasure.primaryFlag">
                    <el-radio label="Y" :value="Y">是</el-radio>
                    <el-radio label="N" :value="N">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="newUnitmeasure.enableFlag">
                    <el-radio label="Y" :value="Y">是</el-radio>
                    <el-radio label="N" :value="N">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="newUnitmeasure.remark" type="textarea" />
            </el-form-item>


        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancelAddUnitmeasure">取消</el-button>
                <el-button type="primary" @click="doAddUnitmeasure">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 添加单位的弹窗窗体结束-->


    <!-- 修改单位的弹窗窗体开始-->
    <el-dialog v-model="unitmeasureEditDrawer" title="添加单位" width="1000" align-center>
        <!-- 添加单位的表单 -->
        <el-form label-width="100px" :model="editUnitmeasure" style="max-width: 900px">
            <el-form-item label="单位编码">
                <el-input v-model="editUnitmeasure.measureCode" />
            </el-form-item>
            <el-form-item label="单位名称">
                <el-input v-model="editUnitmeasure.measureName" />
            </el-form-item>
            <el-form-item label="是否是主单位">
                <el-radio-group v-model="editUnitmeasure.primaryFlag">
                    <el-radio label="Y" :value="Y">是</el-radio>
                    <el-radio label="N" :value="N">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="editUnitmeasure.enableFlag">
                    <el-radio label="Y" :value="Y">是</el-radio>
                    <el-radio label="N" :value="N">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="editUnitmeasure.remark" type="textarea" />
            </el-form-item>


        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="canceleditUnitmeasure">取消</el-button>
                <el-button type="primary" @click="doUnitmeasureEdit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 修改单位的弹窗窗体结束-->

    <el-text>修改功能中选否的功能未实现</el-text>
</template>
<script>
import unitmeasureRequest from '../../../aip/md/unitmeasure-api.js';

export default {
    data() {
        return {
            unitmeasures: [],
            queryUnitmeasure: { enableFlag: '' },
            page: 1,
            limit: 10,
            total: 0,
            maxPageNum: 1,

            newUnitmeasure: {},
            addUnitmeasureDialogVisible: false,

            editUnitmeasure: {},
            unitmeasureEditDrawer: false,

        };
    },
    methods: {
        // 加载计量单位
        loadUnitmeasures() {

            console.log(this.queryUnitmeasure);
            //axios调用
            unitmeasureRequest.list(this.page, this.limit, this.queryUnitmeasure, data => {
                console.log(data); // 这里的data就是我们的PerRequest对象
                // 取出分页的数据
                let pager = data.data;
                this.unitmeasures = pager.data;//改
                this.total = pager.total;
                this.maxPageNum = pager.maxPageNum;
            });


        },

        /**
        * 分页栏的按钮事件
        * @param {} currPage  最新的页码
        */
        changePage(currPage) {
            this.page = currPage;
            this.loadUnitmeasures();
        },
        // 重置清空
        cleanUnitmeasures() {
            this.queryUnitmeasure = '';
        },
        /**回调函数后,将后端数据传给前端
                 * 添加单位的提交按钮事件
                 */
        doAddUnitmeasure() {

            // 单位数据 this.newUnitmeasure
            unitmeasureRequest.saveUnitmeasure(this.newUnitmeasure, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '添加单位成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.addUnitmeasureDialogVisible = false;
                    // 重新加载数据
                    this.loadUnitmeasures();
                    // 将newUnitmeasure制空
                    this.newUnitmeasure = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '单位名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '添加失败',
                        type: 'error',
                    });
                }
            });
        },


        /**
* 行编辑按钮事件
* @param {*} row 整行数据 
*/
        handleEdit(row) {
            // 显示抽屉弹窗
            console.log(this.editUnitmeasure.enableFlag);
            // 通过id加载要编辑的单位信息
            unitmeasureRequest.get(row.measureId, res => {
                this.editUnitmeasure = res.data;
                console.log(this.editUnitmeasure.enableFlag);
                // 显示抽屉弹窗
                this.unitmeasureEditDrawer = true;
            });
        },
        /**
            * 单位编辑提交按钮事件
            */
        doUnitmeasureEdit() {
            // 提交editUnitmeasure即可
            unitmeasureRequest.edit(this.editUnitmeasure, res => {
                // 这里的res就是我们的后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑单位成功',
                        type: 'success'
                    });
                    //关闭窗体
                    this.unitmeasureEditDrawer = false;
                    // 重新加载数据
                    this.loadUnitmeasures();
                    // 将editUnitmeasure制空
                    this.editUnitmeasure = {};
                } else if (res.code == '300') {
                    this.$message({
                        message: '单位名重复',
                        type: 'warning',
                    });
                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },

        /**
* 行编辑按钮事件
* @param {*} row 整行数据
*/
        handleDelete(row) {
            unitmeasureRequest.delete(row.measureId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadUnitmeasures();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },





    },
    mounted() {
        this.loadUnitmeasures();
    }

}
</script>

<style scoped></style>